<template>
  <div class="login-page">
    <div class="login-box">
      <h3 class="login-title">用户登录</h3>
      <AiForm
        :data="form.data"
        @change="change"
        ref="formRef"
      />
      <a-button type="primary" class="login-btn" @click="login">登录</a-button>
    </div>
  </div>
</template>
<script setup>
import store from "@/store";
const form = ref({
  data: [
    {
      type: "Input",
      field: "username",
      value: "",
      placeholder: "用户名",
      rules: [
        {
          required: true,
          msg: "请输入用户名",
          trigger: "blur",
        },
      ],
    },
    {
      type: "InputPassword",
      field: "password",
      value: "",
      placeholder: "密码",
      rules: [
        {
          required: true,
          msg: "请输入密码",
          trigger: "blur",
        },
      ],
    },
  ],
});

const router = useRouter();
const modelForm = ref({});
const formRef = ref();
const change = (val) => {
  if (val.target) return;
  modelForm.value = val;
};

const login = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("confirm", modelForm.value);
      store
        .dispatch(
          "user/Login",
          Object.assign({}, { grant_type: "password" }, modelForm.value)
        )
        .then((res) => {
          if (res.code === rescf.codeVal) {
            router.push({ path: "/home" });
          } else {
            message.error(res.msg);
          }
        });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>
<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
}
.login-box {
  width: 300px;
  position: absolute;
  background-color: #fff;
  padding: 20px 25px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}
.login-btn {
  width: 100%;
  margin: 15px 0;
}
.login-title {
  text-align: center;
  margin: 10px 0 20px;
}
</style>
